<!--
 * @Descripttion: 用户手册管理
 * @version: 
 * @Author: 穆宏宇
 * @Date: 2020-10-21 13:33:50
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-04 17:48:40
-->
<template>
	<div class="handbooks">
		<el-form ref="queryForm" :inline="true" label-width="88px">
			<el-form-item label="批次号">
				<el-input type="text" v-model="queryParams.batchNumber" clearable />
			</el-form-item>
			<el-form-item label="订单号">
				<el-input type="text" v-model="queryParams.orderNo" clearable />
			</el-form-item>
			<el-form-item label="sku">
				<el-input type="text" v-model="queryParams.sku" clearable />
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button @click="getData()">搜索</el-button>
				<el-button @click="reset">重置</el-button>
				<el-button @click="downloadTemplate">下载模板</el-button>
				<el-button>
					<el-upload :action="fileUrl" :headers="fileHeaders" :show-file-list="false" :file-list="fileList"
						:on-success="handleAvatarSuccess" :on-error="handleAvatarError" multiple :limit="10000">
						<div class="el-upload__text">导入excel</div>
					</el-upload>
				</el-button>
			</el-form-item>
		</el-form>

		<el-row class="handbooks-box">
			<el-table :data="list" border :header-cell-style="{background: '#f5f7fa'}" style="width: 100%;">
				<el-table-column prop="batch_number" label="批次号">
				</el-table-column>
				<el-table-column prop="order_no" label="订单号">
				</el-table-column>
				<el-table-column prop="sku" label="sku">
				</el-table-column>
			</el-table>

			<!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
	  	@pagination="getData" />
	  		<el-pagination
	  		    @size-change="handleSizeChange"
	  		    @current-change="handleCurrentChange"
	  		    :current-page="currentPage"
	  		    :page-size="pageSize"
	  		    layout=" ->, total, sizes, prev, pager, next, jumper"
	  			
	  		    :total="total">
	  		</el-pagination> -->
			
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-size="pageSize" layout=" ->, total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	import fileUpdata from "@/api/file.config";
	import {
		deleteFile
	} from "@/api/common.api"
	import {
		selInvoiceRecon,
		invoiceReconciliation,
		downloadInvoiceZhi
	} from '@/api/admin.api'
	export default {
		data() {
			return {
				fileHeaders: fileUpdata.headers(),
				fileUrl: "/vapi/excel/import/importInvoiceRecon",
				fileList: [],
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					batchNumber: '',
					orderNo:'',
					sku:''
				},
			};
		},
		mounted() {
			this.getData()
		},
		methods: {
			downloadTemplate(){
				downloadInvoiceZhi({
					name:this.name
				}).then(res=>{
					const blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '模板.xlsx')
				})
			},
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = filename
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					batchNumber: '',
					orderNo:'',
					sku:''
				}
			},
			exportOrder(order_no) {
				invoiceReconciliation({
					order_no: order_no
				}).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val
				this.getData()
			},
			handleCurrentChange(val) {
				this.queryParams.pageNum = val
				this.getData()
			},
			// 上传成功
			handleAvatarSuccess(res) {

				if (res && res.code === 200) {
					this.$message({
						message: '上传成功',
						type: 'success'
					})
					this.fileList = []
					this.getData()
				}
			},
			//  上传失败
			handleAvatarError(err) {
				this.$message({
					message: '上传失败',
					type: 'warning'
				})
			},
			// 下载
			download(item) {
				window.open(item.url)
			},
			// 查询列表
			getData() {
				selInvoiceRecon(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			// 删除
			deleteItem(item) {
				this.$confirm('确定删除文件', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteFile(10, item.id).then(res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getData()
					})

				});
			}
		},
	};
</script>

<style scoped lang='scss'>
	.handbooks {
		.title {
			margin: 10px 0;
			// font-weight: bold;
			text-align: left;
		}

		.upload-box {
			margin-top: 30px;
			text-align: center;
		}
	}
</style>
